<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>角色管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-input v-model="select_word" style="width: 300px" placeholder="请输入查询关键字"></el-input>
        <el-button icon="search" plain @click="search">搜索</el-button>
        <el-button @click="addroleVis = true">添加角色信息</el-button>
        <el-dialog title="添加角色" :visible.sync="addroleVis" size="small">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="角色名称" prop="role">
                    <el-input v-model="ruleForm.role"></el-input>
                </el-form-item>
                <el-form-item label="角色名称" prop="description">
                    <el-input v-model="ruleForm.description"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <div style="margin-top: 20px">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column property="role" label="角色名"></el-table-column>
                <el-table-column property="description" label="名称"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            icon="edit"
                            @click="handleEdit(scope.$index, scope.row)">修改
                        </el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            icon="delete"
                            @click="delOne(scope.$index, scope.row)">删除
                        </el-button>
                        <el-button
                            size="mini"
                            type="primary"
                            icon="plus"
                            @click="associatedRole(scope.$index, scope.row)">分配资源
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-dialog title="分配资源" :visible.sync="resourceAllocationVis" height="30%">
            <div>
                <el-checkbox-group v-model="checkedCities">
                    <el-checkbox  @change="handleCheckedCitiesChange" v-for="item in descriptions" :label="item.permissionId" :key="item.permissionId">{{item.description}}</el-checkbox>
                </el-checkbox-group>
                <div style="margin-top: 30px;left: 85%;position: relative">
                    <el-button type="primary" @click="handassociated()">立即分配</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="修改角色信息" :visible.sync="updaterole">
            <el-form :model="updateform">
                <el-form-item label="角色名" :label-width="formLabelWidth">
                    <el-input v-model="updateform.role" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-input v-model="updateform.description" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateRole">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                roleId:'',
                Resource:[],
                checkedCities: [],
                descriptions: [{
                    description:'',
                    permissionId:''
                }],
                formLabelWidth: '120px',
                updaterole: false,
                resourceAllocationVis: false,
                addroleVis: false,
                select_word: '',
                updateform: {
                    roleId: '',
                    role: '',
                    description: '',
                },
                tableData: [{
                    description: '',
                    role: '',
                    permissions:[{
                        description:'',
                        permission_id:'',
                    }],
                    role_id: '',
                }],
                ruleForm: {
                    role: '',
                    description: ''
                },
                rules: {
                    role: [
                        {required: true, message: '请输入角色名', trigger: 'blur'},
                    ],
                    description: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                    ],
                }
            };
        },
        created() {
            this.getData();
        },
        methods: {
            getData() {
                this.$axios.get('text/role/findAllRole').then((res) => {
                    this.tableData = res.data.data;
                })
                this.$axios.get('text/permission/findAllRole').then((res) => {
                    this.descriptions=res.data.data
                })
            },
            search(select_word) {
                this.$axios.get('text/role/queryfuzzy?keyword=' + this.select_word).then((res) => {
                    this.tableData = res.data.data;
                })
            },
            handleEdit(index, row) {
                this.updaterole = true;
                this.updateform = row
            },
            updateRole(){
                this.$axios.put('/text/role/update?' +
                    'roleId='+this.updateform.roleId+
                    '&role=' + this.updateform.role +
                    '&description=' + this.updateform.description
                ).then((res) => {
                    if(res.data.code==200)
                    {
                        this.$message.info('修改成功！！');
                        this.updaterole = false;
                    }
                    this.getData();

                })
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('text/role/createRole?' +
                            "&role=" + this.ruleForm.role +
                            "&description=" + this.ruleForm.description
                        ).then((res) => {
                            this.getData()
                            this.$message.info('添加成功');
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            associatedRole(index, row) {
                this.resourceAllocationVis=true;
                this.roleId=row.role_id;
                console.log(row.permissions);
                var Roles=new Array();
                for(var i=0;i<row.permissions.length;i++)
                {
                    Roles.push(row.permissions[i].permission_id);
                    for(var j=0;j<this.descriptions.length;j++) {
                        if (this.descriptions[j].permissionId == row.permissions[i].permission_id)
                        {
                            this.checkedCities.push(row.permissions[i].permission_id);
                        }
                    }
                }
                console.log(Roles);
                console.log(this.checkedCities)
            },
            handassociated(){
                var json = [];
                for (var i = 0; i<this.checkedCities.length; i++) {
                    var j = {};
                    j.permissionId = this.checkedCities[i];
                    j.roleId =this.roleId;
                    json.push(j);
                }   console.log(json);
                var a = JSON.stringify(json);
                console.log(a);
                this.$axios({
                    method:"POST",
                    url:'text/role/correlationPermission',
                    dataType:'json',
                    data:json,
                }).then((res)=>{
                    if(res.data.code==200){
                        this.getData();
                        this.resourceAllocationVis=false;
                    }
                })
            },
            handleCheckedCitiesChange() {
                console.log(this.checkedCities)
                for(var i=0;i<this.checkedCities.length;i++)
                {
                    console.log(this.checkedCities[i])
                }

            },
            delOne(index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete('text/role/deleteRole?' +
                        'roleId=' + row.roleId
                    ).then((res) => {
                        this.getData();
                        if (res.data.code == 601) {
                            this.$message({
                                message: '该角色正在使用，无法删除！！',
                                type: 'warning'
                            });
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleDelete(index, row) {
                this.resourceAllocationVis = true;
                console.log(index, row);
            },
            handleCheckedCitiesChange() {
                console.log(this.checkedCities)
                for(var i=0;i<this.checkedCities.length;i++)
                {
                    console.log(this.checkedCities[i])
                }

            },
        },

    }
</script>

<style scoped>

</style>
